<!--商城列表-->
<template>
  <list class="all bg1" :loadmoreoffset="50" @loadmore="httpShopsLoading">

    <!--刷新-->
    <refresh class="refresh" :display="isRefresh ? 'show' : 'hide'" @refresh="httpShops">
      <loading-indicator class="load text1"></loading-indicator>
    </refresh>

    <cell v-for="(item, index) in datas" v-bind:key="index">

      <div class="cell bg2" @click="cellClick(item)">
        <LImage class="texture2" :src="Config.img('texture2.png')"></LImage>
        
        <div class="row aend">
          <text class="font32 text1 text300">{{T(item.strategyName)}}</text>
          <text class="font24 text2">{{' ' + item.strategyCode}}</text>

          <div class="all"></div>
          <text :class="['font32', Config.upDown(item.expectedAnnual)]">{{item.expectedAnnual+'%'}}</text>
        </div>

        <div class="height20"></div>
        <div class="row aend">
          <text class="font24 text3 text380">{{T(item.describe)}}</text>

          <div class="all"></div>
          <text class="font24 text3">{{T('年化收益率')}}</text>
        </div>

        <div :class="['type', false ? 'type-hong' : '']">
          <text :class="['font22', false ? 'udRed-t1' : 'main-t1']">{{false ? T('合约') : T('币币')}}</text>
        </div>
      </div>

      <div class="genduo-bg" v-if="pageMax && (index == datas.length - 1)">
        <text class="font22 text3">{{T('没有更多数据')}}</text>
      </div>
    </cell>
  </list>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.cell {
  padding: 50px;

  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.text300 {
  max-width: 300px;
  lines: 1;
  text-overflow: ellipsis;
}
.text380 {
  max-width: 380px;
  lines: 1;
  text-overflow: ellipsis;
}

/*********************** 推荐标签*/
.cellof-tag {
  position: absolute;
  justify-content: center;
  align-items: center;

  height: 54px;

  padding-left: 26px;
  padding-right: 26px;

  top: 12px;
  right: 6px;
  background-color: brown;
}

/*类型标签*/
.type {
  position: absolute;
  justify-content: center;
  align-items: center;
  height: 32px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background-color: rgba(22, 119, 254, 0.1);
  top: 0;
  right: 0;
}
.type-hong{
  background-color: rgba(252, 97, 128, 0.1);
}

/*********************** 刷新*/
.refresh {
  width: 750;
  flex-direction: row;
  justify-content: center;
}
.load {
  margin-top: 16px;
  height: 40px;
  width: 40px;
}
.genduo-bg {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}
</style>

<script>
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jconfig from "@/_js/config";
import jmath from "@/_js/math";
import jhttps from "@/_js/https";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  
  data() {
    return {
      T: T,
      Config:jconfig,
  
      isRefresh:false, //显示刷新
      isLoadinging:false, //显示加载
      pageNo:0, //页码
      pageMax:false, //turn最大页面
      
      datas:[], //策略列表
    };
  },

  mounted() {
    jconfig.init(()=>{
      this.httpShops();
    },[jconfig.OPT_UP_DOWN]);
  },

  methods: {

    initData(datas) {
      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];
        data.expectedAnnual = jmath.addJia(data.expectedAnnual);
      }
      return datas;
    },

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      weexFunction.logPageView('策略商城', true);
    },

    //完全隐藏
    viewdisappear() {
      weexFunction.logPageView('策略商城', false);
    },

    /********************************* HTTP*/
    //http商城列表-刷新
    httpShops() {
      if (this.isRefresh || this.isLoadinging) return;
      this.isRefresh = true;

      var param = {'pageNo':1};
      jhttps.post("shopV3/shopStrategys", param,true,(data) => {

        this.isRefresh = false;
        if (data.status == 200) {
          data = data.data;

          this.datas = this.initData(data);
          this.pageNo = 1;
          this.pageMax = data.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http商城列表-加载
    httpShopsLoading() {
      if (this.pageMax || this.isRefresh || this.isLoadinging) return;
      this.isLoadinging = true;

      var param = {'pageNo': this.pageNo+1};
      jhttps.post("shopV3/shopStrategys", param,true,(data) => {
        this.isLoadinging = false;

        if (data.status == 200) {
          data = data.data;

          data = this.initData(data);
          this.datas.push(...data);
          this.pageNo++;
          this.pageMax = data.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************* 点击触发*/
    //cell点击
    cellClick(item) {
      var param = {'strategyId':item.strategyId};
      jnavigator.open('', 'shop/ShopInfo', param);
    },
  },
};
</script>
